<template>
	<div class="edit">
		<div class="edit-msg">
			<el-row>个人信息</el-row>
			<div class="edit-bmsg-p">
				<p><span>账号：</span>{{account}}</p>
				<p><span>昵称：</span>{{name}}</p>
				<p><span>电话：</span>{{phone}}</p>
			</div>
		</div>
		<div class="edit-img">
			<el-row>更换头像</el-row>
			<div class="edit-button">
				<article>
					<el-avatar  :size="100" shape="square">
					      <el-image style="height: 100%;" :src="`${$Imgurl}/api/public/showImg/${imgs}`" >
					      </el-image>
					</el-avatar>
					<el-button size="small" @click="flagImg=true">更换头像</el-button>
				</article>
				<template v-if="flagImg">
					<div style="text-align: center;margin: 0px 0 0 10px;">
						<el-upload	action=""
							     list-type="picture-card"
							     :multiple="false"
							     :auto-upload="false"
							     :limit="1"
								 :on-change="handleChange"
								 style="display: flex;"
							   >
							     选择头像
						</el-upload>
						<el-button size="small" style="margin-top: 10px;" @click="upload()">上传头像</el-button>
					</div>
				</template>
			</div>
			
		</div>
		<div class="edit-uname">
			<el-row>修改个人信息</el-row>
			<div class="edit-button">
				<el-button type="primary" @click="updateDate()">修改昵称</el-button>
				<el-input  v-model="inUname"  placeholder="请输入新的昵称" />
			</div>
			<div class="edit-button">
				<el-button type="primary" @click="updateDate()">修改电话</el-button>
				<el-input v-model="inPhone" placeholder="请输入新的联系方式" />
			</div>
			<div class="edit-button">
				<form style="display: flex;">
					<el-button type="primary" @click="updatePwd()">修改密码</el-button>
					<el-input :show-password="true" v-model="inpwd"  placeholder="请输入新密码" ></el-input>
				</form>
			</div>
		</div>
	</div>
</template>

<script>
	var that = null;
	import { Plus } from '@element-plus/icons-vue'
	import { ElMessage } from 'element-plus'
	import { mapMutations } from 'vuex'
	export default{
		name:'Edit',
		data(){
			return{
				inUname:'',
				inpwd:'',
				inPhone:'',
				account:'',//账号
				phone:'',//电话
				name:'',//昵称
				imageUrl: '',
				fileList:[],
				imgs:'',
				flagImg:false,
				pic:null,
				
			}
		},
		methods:{
			//上传图片
			upload(){
				if(!this.pic){
					ElMessage({message:"还未选择图片！",type: "error"})
					return false;
				}
				let formdata = new FormData();
				formdata.append('img',this.pic)
				this.axios.post('/api/fore/user/updateImg',formdata).then((res)=>{
					if(res.data.code==200){
						localStorage.setItem('imgs',res.data.data)
						this.$router.go(0);
					}
					console.log(res);
				}).catch((error)=>{
					console.log(error);
				})
			},
			//获取即将上传的图片
			handleChange(img){
				this.pic = img.raw;
				console.log(img.raw);
			},
			//修改昵称和电话
			updateDate(){
				if(this.inUname || this.inPhone){
					this.axios.post('/api/fore/user/updateInfo','nickname='+this.inUname+'&phone='+this.inPhone).then((res)=>{
						if(res.data.code==200){
							if(this.inUname){
								localStorage.setItem('nickname',this.inUname);
							}
							if(this.inPhone){
								localStorage.setItem('phone',this.inPhone);
							}
							this.$router.go(0);
						}
						
					}).catch((error)=>{
						console.log(error);
					})
				}
			},
			//修改密码
			updatePwd(){
				if(!this.inpwd){
					return false;
				}
				this.axios.post('/api/fore/user/updatePwd','pwd='+this.inpwd).then((res)=>{
					if(res.data.code==200){
						ElMessage({message:"密码修改成功！",type: "success"})
						setTimeout(function(){
							that.removeobj()
							that.$router.go(0);
						},500)
					}
				}).catch((error)=>{
						console.log(error);
				})
			},
			...mapMutations(['removeobj'])
		},
		components:{
			Plus
		},
		created() {
			that = this
			this.imgs = localStorage.getItem('imgs')
			this.account = localStorage.getItem('account')
			this.phone = localStorage.getItem('phone')
			this.name = localStorage.getItem('nickname')
		}
	}
</script>

<style scoped>
	article{
		justify-content: center;
		display: flex;
		flex-direction: column;
	}
	article .el-button{
		margin-top: 10px;
	}
	:deep(.el-upload--picture-card){
		display: flex;
		font-size: 13px;
		align-items: center;
		justify-content: center;
		width: 100px !important;
		height: 100px !important;
	}
	.edit{
		width: 90%;
		margin: 0 auto;
	}
	.edit-msg,.edit-img,.edit-uname,.edit-phone{
		width: 100%;
		overflow: hidden;
		margin: 20px 0;
		box-shadow: 0 0 5px #72767B;
	}
	.el-row{
		width: 95%;
		display: flex;
		align-items: center;
		padding: 15px 0;
		margin: 0 auto ;
		border-bottom: 5px solid #cbd3b7;
	}
	.edit-button{
		display: flex;
		width: 95%;
		margin: 15px auto;
		align-items: center;
	}
	.edit-button .el-input{
		width: 90%;
	}
	.edit-bmsg-p{
		width: 95%;
		margin: 15px auto;
	}
	.avatar-uploader .el-upload {
	  border: 1px dashed #d9d9d9;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
	  border-color: #409eff;
	}
	.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 178px;
	  height: 178px;
	  text-align: center;
	}
	.avatar-uploader-icon svg {
	  margin-top: 74px; /* (178px - 28px) / 2 - 1px */
	}
	.avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	}
</style>
